<template>
	<view class="matching-page">
		<template v-if="list.length>0">
			<view @click="navigate('/page_other/job_hunting/job_detail/index?id='+item.id)"
				class="list-item" v-for="(item,index) in list" :key="item.id">
				<view class="list-info">
					<view class="title">{{item.jobTitle}}</view>
					<view class="address">{{item.jobAddress}}</view>
					<view class="label-block">
						<view class="label-item" v-for="label in item.label">{{label}}</view>
					</view>
					<view class="wage" v-if="item.minSalary">{{item.minSalary}}-{{item.maxSalary}}<text class="unit">元</text></view>
					<view class="wage" v-else>面议</view>
				</view>
				<view class="detail-info">
					<view class="name">{{item.comRecruiters.comPosition}}</view>
					<image mode="aspectFill" :src="item.comRecruiters.user.faceUrl" class="photo"></image>
				</view>
			</view>
		</template>
		<view v-else class="empty">暂无匹配的岗位</view>
	</view>
</template>

<script>
	import {getMatchingPost} from '@/api/job_hunting.js'
	export default{
		data(){
			return{
				list:[]
			}
		},
		methods:{
			navigate(url){
				if(url){
					uni.navigateTo({
						url
					})
				}
			},
			getPublish(e){
				e.page=1;
				e.limit=20;
				uni.showLoading({
					title:'匹配中',
					mask:true
				})
				getMatchingPost(e).then((res)=>{
					this.showToast('系统已自动为您匹配合适的岗位')
					this.list=res.list
				})
			}
		},
		onLoad(e) {
			this.getPublish(e)
		}
	}
</script>

<style lang="scss" scoped>
	.matching-page{
		padding: 30rpx;
	}
	.list-item {
		width: 100%;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 10px 0 #efefef;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 20rpx;
	
		.detail-info {
			width: 260rpx;
			height: 200rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
	
			.name {
				width: 110rpx;
				font-size: 24rpx;
				color: #999;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
				text-indent: 15rpx;
			}
	
			.photo {
				width: 70rpx;
				height: 70rpx;
				border-radius: 100%;
				background: #efefef;
			}
	
			.apply-btn {
				border: 1px solid #FE7526;
				border-radius: 8rpx;
				color: #FE7526;
				font-size: 24rpx;
				padding: 8rpx 28rpx;
				position: relative;
				left: 30rpx;
			}
		}
	
		.list-info {
			width: calc(100% - 180rpx);
			display: flex;
			flex-direction: column;
	
			>view {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
	
			.title {
				color: #000;
				font-weight: bold;
				font-size: 34rpx;
				width: 360rpx;
			}
	
			.address {
				color: #999;
				font-size: 26rpx;
				margin-top: 20rpx;
			}
	
			.label-block {
				font-size: 24rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: left;
				margin-top: 20rpx;
	
				.label-item {
					padding: 8rpx 20rpx;
					background: #F5F6F8;
					color: #999;
					margin: 0 10rpx 20rpx 0;
				}
			}
	
			.wage {
				color: #FE7526;
				font-size: 36rpx;
				font-weight: bold;
	
				.unit {
					font-size: 28rpx;
					font-weight: normal;
				}
			}
		}
	}
</style>